<template>
  <div class="warpper-box sendSalary">
    <a-card title="订单信息">
      <detail-list :col="2">
        <detail-list-item term="订单名称">{{ orderInfo.orderName }}</detail-list-item>
        <detail-list-item term="订单企业">{{ orderInfo.enterpriseName }}</detail-list-item>
        <detail-list-item term="订单周期">{{ orderInfo.period }}</detail-list-item>
        <detail-list-item term="补缴服务费总额">{{ orderInfo.serviceAmoutBackfill }}</detail-list-item>
      </detail-list>
    </a-card>
    <a-card style="margin-top: 10px;">
      <div style="display: flex;justify-content: space-between;align-items: flex-start;">
        <form-create v-model="params.fApi" :rule="params.rule" :option="params.option" @btn-search-click="addLoad" @btn-reset-click="reset" />
        <span style="padding: 5px 0 0 0;" v-if="orderInfo.inType == 'edit'">
          <a-input v-model="averageTotal" placeholder="请输入强制总分" style="width: 200px;" allowClear
            @change="clearAverage"></a-input>
          <a-button type="warning" @click="handleAverage" style="margin-left: 10px;">强制均分</a-button>
        </span>
      </div>
      <div v-if="orderInfo.inType == 'edit'">
        <a-table :columns="table.columns" :data-source="table.loadData" :pagination="false" @change="handleTableChange"
          rowKey="detailId">
          <span slot="tempAmount" slot-scope="text, record">
            <a-input v-model="record.tempAmount" placeholder="请输入数值"></a-input>
          </span>
        </a-table>
      </div>
      <div v-else>
        <a-table :columns="table.columns" :data-source="table.loadData" :pagination="table.pagination" @change="handleTableChange" rowKey="detailId">
        </a-table>
      </div>
      <div style="height: 60px;"></div>
    </a-card>
    <!-- 返回||提交 -->
    <a-card class="footBtn" hoverable :bordered="false">
      <a-button icon="logout" class="ant-btn-warning" @click="goBack">返回</a-button>
      <span v-if="orderInfo.inType == 'edit'">
        <a-button type="primary" icon="code" @click="serviceTotalClick"
          style="margin-left: 10px;background-color: #73aa2a;border-color: #73aa2a;">计算服务费</a-button>
        <a-button type="primary" icon="file-done" @click="submit" style="margin-left: 10px;">提交 <span
            v-show="serviceTotal">( {{ serviceTotal }}元 )</span></a-button>
      </span>
    </a-card>
  </div>
</template>

<script>
import store from '@/store'
import {
  PARAMS_SALARY_PAY
} from "./form"
import {
  OPTION_BLOCK,
  OPTION_INLINE
} from "../base_form"
import {
  getTablePayPage,
  getTablePayDetailPage,
  serviceSubmit
} from "@/api/human/salaryPaySendSalary"
import { mapGetters, mapActions } from 'vuex'
import DetailList from '@/components/tools/DetailList'
const DetailListItem = DetailList.Item
export default {
  name: 'sendSalaryPay',
  components: {
    DetailList,
    DetailListItem
  },
  data() {
    return {
      params: {
        fApi: {},
        rule: PARAMS_SALARY_PAY,
        option: OPTION_INLINE,
      },
      table: {
        columns: [],
        loadData: [],
        pagination: {
          current: 1,
          pageSize: 10,
          total: 0,
          showSizeChanger: true,
					showQuickJumper: true,
          pageSizeOptions: ["10", "20", "50", "100"],
          showTotal: total => `共有 ${total} 条数据`,
        }
      },
      pagination: { current: 1, pageSize: 10 },
      selectedRowKeys: [], // 选择的table数据id
      selectedRows: [], // 选择的table数据

      orderInfo: {}, // 页面携带的订单信息
      averageTotal: "", // 强制均分
      serviceTotal: "", // 补缴服务费总计
    }
  },
  filters: {
    filterMore(value, num) {
      if (!value) return ''
      if (value.length > num) {
        return value.slice(0, num) + '...'
      }
      return value
    }
  },
  mounted() {
    window.addEventListener('keyup', this.keyDown);
  },
  destroyed() {
    window.removeEventListener('keyup', this.keyDown);
  },
  beforeCreate() {
    this.events_form = this.$form.createForm(this, {
      name: 'events_form'
    })
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  created() {

  },
  activated() {
    this.$nextTick(() => {
      this.orderInfo = this.$route.query;
      if (this.orderInfo.inType == 'edit') {
        this.loadTable(true);
      } else if (this.orderInfo.inType == 'info') {
        this.loadTableDetail(true);
      }
    })
  },
  methods: {
    // table复选框选择
    onSelectChange(selectedRowKeys, selectedRows) {
      // console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
      this.selectedRows = selectedRows;
    },
    // 获取补缴明细列表
    async loadTable(flag) {
      this.table.loadData = [];
      // table配置项重置
      this.table.columns = [
        {
          title: '姓名',
          dataIndex: 'userName',
        },
        {
          title: '发薪金额',
          dataIndex: 'settleAmount',
        },
        {
          title: '服务费',
          dataIndex: 'serviceFeeAmount',
        },
        {
          title: '服务费已补退',
          dataIndex: 'serviceAmountBackfill',
        },
        {
          title: '新补缴服务费',
          dataIndex: 'tempAmount',
          fixed: 'right',
          scopedSlots: { customRender: 'tempAmount' }
        }
      ];

      let params = this.params.fApi.formData();
      if (flag) {
        this.table.pagination.current = 1;
        this.table.pagination.pageSize = 1000;
      }
      params.orderId = this.orderInfo.orderId;
      params.pageNum = this.table.pagination.current;
      params.pageSize = this.table.pagination.pageSize;
      const { code, data } = await getTablePayPage(params);
      if (code === '1') {
        this.table.loadData = data;
      }
    },
    handleTableChange(pagination) {
      this.table.pagination.current = pagination.current;
      this.table.pagination.pageSize = pagination.pageSize;
      this.loadTable(false);
    },
    // 获取补缴详情明细列表
    async loadTableDetail(flag) {
      this.table.loadData = [];
      // table配置项重置
      this.table.columns = [
        {
          title: '姓名',
          dataIndex: 'userName',
        },
        {
          title: '发薪金额',
          dataIndex: 'settleAmount',
        },
        {
          title: '服务费',
          dataIndex: 'serviceFeeAmount',
        },
        {
          title: '服务费已补退',
          dataIndex: 'serviceAmountBackfill',
        },
        {
          title: '新补缴服务费',
          dataIndex: 'tempAmount',
        }
      ];

      let params = this.params.fApi.formData();
      if (flag) {
        this.table.pagination.current = 1;
        this.table.pagination.pageSize = 10;
      }
      params.backfillId = this.orderInfo.backfillId;
      params.pageNum = this.table.pagination.current;
      params.pageSize = this.table.pagination.pageSize;
      const { code, data } = await getTablePayDetailPage(params);
      if (code === '1') {
        this.table.loadData = data.content;
      }
    },
    handleTableDetailChange(pagination) {
      this.table.pagination.current = pagination.current;
      this.table.pagination.pageSize = pagination.pageSize;
      this.loadTableDetail(false);
    },
    // 强制均分
    handleAverage() {
      let serviceNum = this.table.loadData.length; // 补缴服务费数量
      if (this.averageTotal == '')
        this.$message.warning('请输入强制均分值')
      let averageVal = this.averageTotal / serviceNum; // 平均值
      this.table.loadData.forEach(item => {
        if (this.averageTotal == '') {
          item.tempAmount = null;
        } else {
          item.tempAmount = averageVal.toFixed(2);
        }
      })
    },
    clearAverage(e) {
      if (e.target.value == "") {
        this.table.loadData.forEach(item => {
          item.tempAmount = null;
        })
      }
    },
    // 计算补缴服务费总额
    serviceTotalClick() {
      if (this.averageTotal) {
        this.serviceTotal = this.averageTotal
      } else {
        let totalNum = 0;
        this.table.loadData.forEach(item => {
          if (item.tempAmount) {
            totalNum += parseFloat(item.tempAmount)
          }
        })
        if (totalNum) {
          this.serviceTotal = totalNum.toFixed(2)
        } else {
          this.serviceTotal = ""
        }
      }
    },
    addLoad() {
      if (this.orderInfo.inType == 'edit') {
        this.loadTable(true);
      } else {
        this.loadTableDetail(true);
      }
    },
    reset() {
      this.params.fApi.resetFields();
      if (this.orderInfo.inType == 'edit') {
        this.loadTable(true);
      } else {
        this.loadTableDetail(true);
      }
    },
    goBack() {
      this.$router.back();
    },
    // 提交
    async submit() {
      let serviceFee = [];
      this.table.loadData.forEach(item => {
        if (item.tempAmount) {
          serviceFee.push({
            detailId: item.detailId,
            tempAmount: item.tempAmount
          })
        }
      })
      if (serviceFee.length == 0)
        return this.$message.warning("请输入补缴服务费")
      let params = {
        orderId: this.orderInfo.orderId,
        dtoList: serviceFee
      }
      const { code } = await serviceSubmit(params)
      if (code == '1') {
        this.averageTotal = "";
        this.serviceTotal = "";
        this.$message.success("操作成功");
        this.loadTable(true);
      }
    }
  }
}
</script>
<style lang="less"></style>